<template>
<div>
    <editor
        :init=editorInit
        api-key="w6pboiemde0khoah4xqzlp9gplj35do81tbjgwiwkiwv2f8n">
    </editor>
</div>
</template>

<script setup>
import Editor from "@tinymce/tinymce-vue"
import {reactive} from "vue";
const plugins = reactive([
    'advlist autolink lists link image charmap print preview anchor',
    'searchreplace visualblocks code fullscreen',
    'insertdatetime media table paste code help wordcount'
])
const toolbar = reactive([
    'undo redo | formatselect | bold italic backcolor | \
     alignleft aligncenter alignright alignjustify | \
     bullist numlist outdent indent | removeformat | image | help'
])
const editorInit = reactive({
    language_url: '/tinymce/langs/zh_Hans.js',  //引入语言包文件
    language: 'zh_Hans',  //语言类型
    plugins: plugins,
    toolbar: toolbar,
    image_list:[
        {title: '测试1', value: 'https://img.xn--away-3y9g.xyz/i/2023/09/30/yx2q51.jpg'},
        {title: '测试2', value: 'https://img.xn--away-3y9g.xyz/i/2023/09/30/yx2q51.jpg'}
    ],

})

</script>

<style scoped>

</style>
